<template>
  <div class="indices-section">
    <div class="indices-header">
      <h2 class="sidebar-title">索引列表</h2>
      <div class="indices-actions">
        <button @click="refreshIndices" class="refresh-btn" :disabled="refreshing">
          🔄
        </button>
        <button 
          v-if="isConnected" 
          @click="showCreateIndexModal" 
          class="create-index-btn"
          title="创建索引"
        >
          +
        </button>
        <button 
          v-if="isConnected" 
          @click="showDeleteIndexModal" 
          class="delete-index-btn"
          title="删除索引"
        >
          -
        </button>
        <button 
          v-if="isConnected" 
          @click="showSelectIndexToEditModal" 
          class="edit-index-btn"
          title="编辑索引"
        >
          🖉
        </button>
      </div>
    </div>
    
    <div v-if="loadingIndices" class="loading">
      <div class="spinner"></div>
      <span>加载中...</span>
    </div>
    
    <div v-else class="indices-list">
      <div 
        v-for="index in indices" 
        :key="index" 
        @click="selectIndex(index)"
        class="index-card"
        :class="{ selected: selectedIndex === index }"
      >
        <div class="index-info">
          <div class="index-name">{{ index }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndicesSection',
  props: {
    isConnected: {
      type: Boolean,
      required: true
    },
    indices: {
      type: Array,
      default: () => []
    },
    loadingIndices: {
      type: Boolean,
      default: false
    },
    selectedIndex: {
      type: String,
      default: ''
    },
    refreshing: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    refreshIndices() {
      this.$emit('refresh-indices');
    },
    selectIndex(index) {
      this.$emit('select-index', index);
    },
    showDeleteIndexModal() {
      this.$emit('show-delete-index-modal');
    },
    showCreateIndexModal() {
      this.$emit('show-create-index-modal');
    },
    showSelectIndexToEditModal() {
      this.$emit('show-select-index-to-edit-modal');
    }
  }
}
</script>